<template>
	<Layout class="p-5 bg-white">
		<Form class="p-5" :model="user" :label-width="80">
			<Row>
				<Col span="8">
				<!-- 员工姓名 -->
				<FormItem class="w-50" label="员工姓名">
					<label>{{user.userInfoName}}</label>
				</FormItem>
				<FormItem class="w-100" label="账号">
					<Input v-model="user.account" />
				</FormItem>
				<FormItem class="w-100" label="密码">
					<Input type="password" v-model="user.password" />
				</FormItem>
				<FormItem class="w-100" label="电话">
					<Input v-model="user.tel" />
				</FormItem>
				</Col>
				<Col span="8">
				<FormItem class="w-100" label="身份证">
					<Input v-model="user.secId" />
				</FormItem>
				<FormItem class="w-100" label="创建时间">
					<label>{{user.ct}}</label>
				</FormItem>
				<!-- 员工工资等级 -->
				<FormItem class="w-150" label="员工等级">
					<Select v-model="user.salaryLevelId">
						<Option v-for="s in salaryLevel" :value="s.salaryLevelId">{{s.salaryLevelId}}</Option>
					</Select>
				</FormItem>
				<!-- 员工职位 -->
				<FormItem class="w-150" label="员工职位">
					<Select class="w-100" v-model="user.positionId" @on-change="userInfoData()">
						<Option v-for=" item in position " :value="item.positionId">
							{{item.positionName}}
						</Option>
					</Select>
				</FormItem>
				<!-- 员工领导 -->
				<FormItem class="w-150" label="员工领导">
					<Select v-model="user.parentId" clearable>
						<Option v-for="u in userInfos" :value="u.userId">{{u.userName}}</Option>
					</Select>
				</FormItem>
				<FormItem class="w-50" label="底薪">
					<label>{{user.baseSalary / 100}}</label>
				</FormItem>
				<FormItem class="w-50" label="满勤">
					<label>{{user.fullWork / 100}}</label>
				</FormItem>
				</Col>
				<Col span="8">
				<FormItem class="w-100" label="角色">
					<div v-for="(item, key) in allRoles" :key="key">
						<Checkbox @on-change="roleChange(item.roleId)" v-model="item.has">{{item.roleName}}</Checkbox>
					</div>
				</FormItem>
				</Col>
			</Row>

			<FormItem>
				<Button @click="submit" type="primary">提交</Button>
				<Button @click="cancel" style="margin-left: 8px">取消</Button>
			</FormItem>
		</Form>
	</Layout>

</template>
<script>
	export default {
		data() {
			return {
				user: {
					nickName: "",
					password: "",
					secId: "",
					userInfoId: "",
					userId: "",
					userInfoName: "",
					salaryLevelId: "",
					positionId: "",
					parentId: "",
					ldName: "",
					baseSalary: "",
					fullWork: "",
					account: "",
					tel: "",
				},
				userId: 0,
				roles: [],
				allRoles: [],
				position: [],
				salaryLevel: [],
				userInfos: [],
				// updateFlg: false,
				// oldUser: {},
				// oldRoles: [],

			}
		},
		methods: {
			roleChange: function(roleId) {

			},
			cancel: function() {
				this.$tabs.close();
			},
			//员工信息职位下拉框请求
			positionData: function() {
				this.http.get({
					url: "/position/info/all",
				}).then(res => {
					this.position = res;
				});
			},

			//员工信息工资等级下拉框
			salaryData: function() {
				this.http.get({
					url: "/salary_level/info/all",
				}).then(res => {
					this.salaryLevel = res;
				});
			},
			
			//员工信息下拉框请求
			userData: function() {
				this.http.get({
					url: "/user_info/info",
					param: {
						userId: this.user.userId
					}
				}).then(res => {
					this.userInfos = res.user_info;
				});
			},

			//员工信息领导二级联动下拉框
			userInfoData: function() {
				this.http.get({
					url: "/user_info/info/all",
					param: {
						positionId: this.user.positionId
					}
				}).then(res => {
					this.userInfos = res.user_info;
				});
			},

			
			submit: function() {
				let self = this;
				let roles = [];
				for (let index in this.$data.allRoles) {
					let roleItem = this.$data.allRoles[index];
					if (roleItem.has) {
						roles.push(roleItem.roleId);
					}
				}
				// self.user.openId = 0;
				self.user.roles = JSON.stringify(roles);
				delete self.user.ct;
				delete self.user.ut;
				delete self.user.cu;
				delete self.user.uu;
				delete self.user.openId;
				this.http.put({
					url: "/user/info",
					param: self.user,
				}).then(() => {
					self.message.info("修改成功");
					this.$tabs.close();
				});
			},
			init: function() {
				this.search();
			},
			searchUser: function() {
				let self = this;

				this.http.get({
					url: "/user/info",
					param: {
						userId: self.$data.user.userId
					}
				}).then(data => {
					self.user = data.user_info;
					for (let jndex in self.allRoles) {
						let role = self.allRoles[jndex];
						role.has = false;
						for (let index in data.roles) {
							let roleItem = data.roles[index];
							if (roleItem.roleId == role.roleId) {
								role.has = true;
								this.roles.push(role);
							}
						}
					}
				});
			},
			search: function() {
				let self = this;
				this.http.get({
					url: "/role/all",
				}).then(data => {
					self.$data.allRoles = data;
				}).then(() => {
					self.searchUser();
				});
			}
		},
		created: function() {},
		mounted: function() {
			this.$data.user.userId = this.$route.params.userId;
			this.init();
			this.positionData();
			this.salaryData();
			this.userData();
		}
	}
</script>

<style>
</style>
